<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/sign.css">
</head>
<body>
    <div class="top">
        <div class="out">
            <span class="lineone"></span>
            <span class="linetwo"></span>
        </div>
        <div class="img"></div>
    </div>
    <div class="phones">
        <div class="phoneSign">
            <div class="phone">
                <label for="">手机号</label>
                <input type="tel" placeholder="请输入手机号">
            </div>
            <div class="verification"><a href="#">获取验证码登录</a></div>
        </div>
        <div class="signChange">
            <div class="changeBox">
                <div class="or">
                    <div class="line"></div>
                    <div class="text">或</div>
                </div>
                <a href="#">密码登录</a>   
            </div>
        </div>
    </div>
    <div class="codes">
        <div class="phoneSign">
            <div class="phone">
                <label for="">登录名</label>
                <input type="tel" placeholder="请输入手机号或邮箱">
            </div>
        </div>
        <div class="phoneSign">
            <div class="phone">
                <label for="">密码</label>
                <input type="tel" placeholder="请输入密码">
                <div class="eye"></div>
            </div>
            <div class="verification">
                <a href="#">登&nbsp;录</a>
                <a class="code">忘记密码</a>
            </div>
        </div>      
        <div class="signChange">
            <div class="changeBox">
                <div class="or">
                    <div class="line"></div>
                    <div class="text">或</div>
                </div>
                <a href="#">手机号注册登录</a>   
            </div>
        </div>
    </div>
</body>
<script>
    // 在iphone6 375宽度中  html是以20px作为基本单位
    (function () {
        function w() {
            var all = document.documentElement;  // 获取html元素
            var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
            console.log(123, test)
            if (test > 750) {
                test = 750;
            }
            rem = test / 18.75;
            console.log(rem)
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();

</script>
</html>